﻿@page "/forms/formcontrol"
<Pager Title="Form Control" Description="Give textual form controls like <input>s and <textarea>s an upgrade with custom styles, sizing, focus states, and more."
	Indicates="@(new[]{"Example","Sizing","Disabled","Readonly","Readonly plain text","Color","Datalists"})">
		<Demo Title="Examle">
		<Description>
			Use <code>Form</code> component instead of <code>EditForm</code> component.
		</Description>
		<Run>
			<Form Model="this">
				<Element Margin="Margin.Is3.FromBottom">
					<FormLabel For="()=>Name">Name</FormLabel>
					<FormInputText @bind-Value="Name" />
				</Element>
				<Element>
					<FormLabel For="()=>Intro">Introduction</FormLabel>
					<FormInputTextArea @bind-Value="Intro" />
				</Element>
			</Form>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Form Model=""this"">
	<Element Margin=""Margin.Is3.FromBottom"">
		<FormLabel For=""()=>Name"">Name</FormLabel>
		<FormInputText @bind-Value=""Name"" />
	</Element>
	<Element>
		<FormLabel For=""()=>Intro"">Introduction</FormLabel>
		<FormInputTextArea @bind-Value=""Intro"" />
	</Element>
</Form>

@code{
	string Name { get;  set; }
	string Intro { get; set; }
}
```
			")
		</Code>
	</Demo>
			<Demo Title="Sizing">
		<Description>
			Set <code>Size</code> for different size.
		</Description>
		<Run>
			<Form Model="this">
					<FormInputText Size="Size.Large" @bind-Value="Name" placeholder="Size.Large"/>
					<br />
					<FormInputText @bind-Value="Name"  placeholder="Size is default"/>
					<br />
					<FormInputText Size="Size.Small" @bind-Value="Name"  placeholder="Size.Small"/>
			</Form>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormInputText Size=""Size.Large"" @bind-Value=""Name"" placeholder=""Size.Large""/>

<FormInputText @bind-Value=""Name""  placeholder=""Size is default""/>

<FormInputText Size=""Size.Small"" @bind-Value=""Name""  placeholder=""Size.Small""/>
```
			")
		</Code>
	</Demo>
	
	<Demo Title="Disabled">
		<Description>
			Set <code>Disabled</code> parameter to give it a grayed out appearance and remove pointer events.
		</Description>
		<Run>
			<Form Model="this">
					<FormInputText @bind-Value="Name"  placeholder="Input is disabled" Disabled/>
					<br />
					<FormInputText @bind-Value="Name"  placeholder="Input is disabled and readonly" Disabled Readonly/>
			</Form>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormInputText @bind-Value=""Name""  placeholder=""Input is disabled"" Disabled/>
<FormInputText @bind-Value=""Name""  placeholder=""Input is disabled and readonly"" Disabled Readonly/>
```
			")
		</Code>
	</Demo>
	<Demo Title="Readonly">
		<Description>
			Set <code>Readonly</code> parameter to prevent modification of the input’s value.
		</Description>
		<Run>
			<Form Model="this">
					<FormInputText @bind-Value="Name"  placeholder="Input is readonly" Readonly/>
			</Form>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormInputText @bind-Value=""Name""  placeholder=""Input is readonly"" Readonly/>
```
			")
		</Code>
	</Demo>
		<Demo Title="Readonly plain text">
		<Description>
			If you want to have <code>Readonly</code> elements in your form styled as plain text, Set <code>Texted</code> parameter
			to remove the default form field styling and preserve the correct margin and padding.
		</Description>
		<Run>
			<Form Model="this">
				<FormInputText Readonly Texted @bind-Value="EmailText" DisplayName="Email"/>
				<br />
				<FormInputPassword @bind-Value="Password" DisplayName="Password"/>
			</Form>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormInputText Readonly Texted @bind-Value=""EmailText"" DisplayName=""Email""/>
<FormInputPassword @bind-Value=""Password"" DisplayName=""Password""/>
```
			")
		</Code>
	</Demo>
		<Demo Title="Color">
		<Description>

		</Description>
		<Run>
			<Form Model="this">
				<FormLabel For="()=>Color">Color picker</FormLabel>
				<FormInputColor @bind-Value="Color"/>
				@Color
			</Form>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormLabel For=""()=>Color"">Color picker</FormLabel>
<FormInputColor @bind-Value=""Color""/>
```
			")
		</Code>
	</Demo>
		<Demo Title="Datalists">
		<Description>
			Datalists allow you to create a group of <code>&lt;option></code>s that can be accessed (and autocompleted) 
			from within an <code>&lt;input></code>. These are similar to <code>lt;select></code> elements, 
			but come with more menu styling limitations and differences. 
			While most browsers and operating systems include some support for <code>lt;datalist></code> elements, 
			their styling is inconsistent at best.
		</Description>
		<Run>
			<Form Model="this">
				<FormLabel For="()=>Selected">Datalist example</FormLabel>
				<FormInputText @bind-Value="Selected" placeholder="Type to search" list="listOptions"/>
				<datalist id="listOptions">
					<option value="San Francisco" />
					<option value="New York" />
					<option value="Seattle" />
					<option value="Los Angeles" />
					<option value="Chicago" />
				</datalist>
			</Form>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormLabel For=""()=>Selected"">Datalist example</FormLabel>
<FormInputText @bind-Value=""Selected"" placeholder=""Type to search"" list=""listOptions""/>
<datalist id=""listOptions"">
	<option value=""San Francisco"" />
	<option value=""New York"" />
	<option value=""Seattle"" />
	<option value=""Los Angeles"" />
	<option value=""Chicago"" />
</datalist>
```
			")
		</Code>
	</Demo>
</Pager>

@code{
	string Name { get;  set; }
	string Intro { get; set; }
	string EmailText { get; set; } = "email@example.com";
	string Password { get; set; }
	string Color{ get; set; }
	string Selected { get; set; }
	string File { get;  set; }
}